import React, { Component } from 'react';
import {withRouter,Link} from 'react-router-dom'
import { Menu, Switch ,Icon} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import PubSub from 'pubsub-js'


import './left-nav.css'
import configList from '../../userConfig/userconfig'

const { SubMenu } = Menu;

class Left_Nav extends Component {

   //点击对应菜单项之后需要告诉标题进行内容的改变
    change = ({ item, key, keyPath, domEvent })=>{
        //将它的路径发对应的title用消息发布的方式发布出去
        let title = ''
        configList.forEach((item)=>{
            if(item.key===key){
                title = item.title
                return 
            }else if(item.children){
               item.children.map((item)=>{
                   if(item.key===key)
                   title = item.title
                   return
               })
            }
        })

        //发布消息
        PubSub.publish('titleChange',title)
        /* console.log("这是路径",key)
        console.log("标题改变，发布消息",title) */

    }
   
    getMuenuItem = (config)=>{
        const path  = this.props.location.pathname
//也可以用reduce函数实现，方法是一样的
        return config.map((item)=>{
            if(!item.children){
                //没有子菜单
                return(
                    //<Menu.Item key= "/home" icon = {<AppstoreOutlined />} onClick = {()=>this.props.history.replace('/home')}>首页</Menu.Item>
                    <Menu.Item key= {item.key} icon = {item.icon}>
                        <Link to={item.key}>
                        {item.title}
                        </Link>
                    </Menu.Item>
                )
            }else{
                if(item.children.find((item)=>item.key==path)){
                    this.OpenKeys = item.key
                }
                console.log(item.children)
                console.log(path)
                return(
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                       {
                            this.getMuenuItem(item.children)
                       }
                    </SubMenu>
                )
            }
        })

    }
    componentWillMount(){
        this.Muemuitem = this.getMuenuItem(configList)
    }
    render() {
        let path  = this.props.location.pathname
        let key = this.OpenKeys
        if(path==='/product/commodity/detail'||path==='/product/commodity/add-update') {
            path='/product/commodity'
            key = '/product'
        }
        
        console.log(key)
        return (
            <div className="container">
                <div className="title">
                    <span>商品后台管理系统</span>
                </div>
                <Menu
                    theme='dark'
                    selectedKeys={[path]}
                    mode="inline"
                    defaultOpenKeys = {[key]}
                    onClick = {this.change}
                >
                {
                    this.Muemuitem
                }
                </Menu>
            </div>
        )
    }
}
export default withRouter(Left_Nav)